<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<title>#(siteTitle)</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="shortcut icon" href="#(ctx)/favicon.ico">
		<link rel="stylesheet" type="text/css" href="#(ctx)/resources/css/common.css">
		<link rel="stylesheet" type="text/css" href="#(ctx)/resources/css/front/index.css">
		<style type="text/css">
			.input {
				width: 1250px;
				height: 22px;
				text-indent: 16px;
				padding: 2px;
				outline: none;
				border: 1px solid #c7c0c0;
				border-radius: 5px;
			}
			
			.btn {
				margin-left: 20px;
				display: block;
				width: 80px;
				height: 28px;
				border: 1px solid #adf1ad;
				line-height: 28px;
				text-align: center;
				border-radius: 5px;
				cursor: pointer;
				color: #367727;
			}
			
			.content {
				width: 1360px;
				height: 600px;
				overflow: auto;
				padding: 20px;
				border: 1px solid gray;
				margin-bottom:20px;
				margin-top: 20px;
				color: #4bc566;
    			font-size: 16px;
			}
			
			/*滚动条样式*/
			.content::-webkit-scrollbar {/*滚动条整体样式*/
			    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
			    height: 4px;
			}
			.content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
			    border-radius: 5px;
			    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			    background: rgba(0,0,0,0.2);
			}
			.content::-webkit-scrollbar-track {/*滚动条里面轨道*/
			    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			    border-radius: 0;
			    background: rgba(0,0,0,0.1);
			}
		</style>
		
		<script type="text/javascript" src="#(ctx)/extends/jquery.min-v1.11.3.js"></script>
		<script>
			var ctx = '#(ctx)';
		</script>
	</head>
	<body>
		<div class="container">
			<div class="content" id="content">
						
			</div>
			<div>
				<div class="f-left"><input id="a" type="text" class="input"></div>
				<span onclick="send()" class="btn f-left" >发送</span>
			</div>
		</div>
		
		<script type="text/javascript" src="#(ctx)/resources/js/front/index.js"></script>
		
		<script>
		
			var websocket;
	    	var websocketUrl = "ws://" + window.location.host + ctx + "/websocket.ws";
	        if ('WebSocket' in window) {
	            websocket = new WebSocket(websocketUrl);
	        } else if ('MozWebSocket' in window) {
	            websocket = new MozWebSocket(websocketUrl);
	        } else {
	        	alert("垃圾浏览器，websocket都不支持，给个alert你回去吔屎啦！");
	        }
	        websocket.onopen = function (evnt) {
	        	console.log("onopen", evnt);
	        };
	        websocket.onmessage = function (evnt) {
	        	$("#content").append(evnt.data + "<br>");
	        };
	        websocket.onerror = function (evnt) {
	        	console.log("onerror", evnt);
	        };
	        websocket.onclose = function (evnt) {
	        	console.log("onclose", evnt);
	        }
	        
	        function send() {
	        	websocket.send($("#a").val());
	        	$("#a").val('');
	        }
	        $("body").keypress(function(event){
	    		var key = event.which;
	    		if(key == "13"){
	    			send();
	    		}
	    	});
		</script>
	</body>
</html>
